<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div id="demo2" class="xm-select-demo"></div>
	<button id='btn'>button</button>
</body>
<script src="../xm-select.js"></script>
<script>
	var demo2 = xmSelect.render({
		el: '#demo2',
		radio:true,
		autoRow: true,
		tree: {
			//是否显示树状结构
			show: true,
			//是否展示三角图标
			showFolderIcon: true,
			//是否显示虚线
			showLine: false,
			//间距
			indent: 20,
			//默认展开节点的数组, 为 true 时, 展开所有节点
			// expandedKeys: [],
			expandedKeys: true,
			//是否严格遵守父子模式
			strict: false,
			//是否开启极简模式
			simple: false,
			//点击节点是否展开
			clickExpand: true,
			//点击节点是否选中
			clickCheck: true,
		},
		on(data) {
			//arr:  当前多选已选中的数据
			var arr = data.arr;
			//change, 此次选择变化的数据,数组
			var change = data.change;
			//isAdd, 此次操作是新增还是删除
			var isAdd = data.isAdd;
			console.log('data', data);
			//可以return一个数组, 代表想选中的数据
			//return []
		},
		height: 'auto',
		data() {
			return [
				{
					name: '销售员', value: -1, children: [
						{ name: '张三', value: 100, selected: true, children: [] },
						{ name: '李四1', value: 2, selected: true },
						{ name: '王五1', value: 3, disabled: true },
					]
				},
				{
					name: '奖品', value: -2, children: [
						{
							name: '奖品3', value: -3, children: [
								{ name: '苹果3', value: 14, selected: true },
								{ name: '香蕉3', value: 15 },
								{ name: '葡萄3', value: 16 },
							]
						},
						{ name: '苹果2', value: 4, selected: true, disabled: true },
						{ name: '香蕉2', value: 5 },
						{ name: '葡萄2', value: 6 },
					]
				},
			]
		}
	})
	const btn = document.getElementById('btn')
	btn.onclick = function () {
		console.log('value', demo2.getValue());
	}
</script>

</html>